<template>
  <div>
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()">
    </van-nav-bar>

    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input = "searchKeyWord"
    >
      <div slot="action" @click="doSearch">搜索</div>
    </van-search>

    <!-- 联想建议区域 -->
    <van-cell-group v-if="keyword">
      <van-cell
      icon="search"
      v-for="(item,index) in wrapperList"
      :key="index"
      @click="doKeySearch(index)">
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"> </van-cell>
      <van-cell :title="item"  v-for="(item,index) in historyList" :key="index" @click.stop="hisSearch(index)">
        <van-icon name="close" @click.stop="delHistory(index)"/>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search'
import { setItem, getItem } from '@/utils/ls'
import _ from 'lodash'
export default {
  data () {
    return {
      keyword: null, // 关键字
      keywordList: [], // 联想关键字
      historyList: getItem('his') || [] // 历史记录数据如果本地有数据拿本地的数据否则为一个空数组
    }
  },
  // 计算属性
  computed: {
    wrapperList () {
      // 循环为每一个改变成新的内容
      const list = this.keywordList.map((value, index, array) => {
        // 定义一正则表达式
        const reg = new RegExp(this.keyword, 'gi') // this.keyword是要匹配的内容，’gi’代表全区匹配不分大小写
        // 通过replace来将第一个参数替换成第二个想变成的格式
        const wrapper = value.replace(reg, (target) => {
          return `<span style="color:red">${target}</span>`
        })
        return wrapper
      })
      return list
    }
  },
  methods: {
    // 输入框输入查到的关键字
    searchKeyWord: _.debounce(function () {
      if (this.keyword === '') {
        this.keywordList = [] // 如果输入框没内容则返回不执行下面代码
        return false
      }
      // 调用接口
      getSuggestion(this.keyword).then((res) => {
        console.log(res)
        this.keywordList = res.data.data.options // 回填关键字的真实数据
      }).catch((err) => {
        console.log(err)
      })
    }, 260),
    // 点击搜索
    doSearch () {
      // 定义一个变量接收遍历出来的值
      const arr = this.historyList.findIndex((value) => {
        return this.keyword === value // 循环去比较是否相等返回一个布尔值
      })
      // 跳转到搜索的页面
      this.$router.push({
        path: '/searchResult',
        query: {
          q: this.keyword
        }
      })
      if (arr !== -1) return // 如果不为-1则不执行后面的程序
      this.historyList.push(this.keyword) // 添加到历史记录里
      setItem('his', this.historyList) // 存到本地
    },
    // 点击下面关键词进行搜索传到历史记录
    doKeySearch (index) {
      // 定义一个变量接收遍历出来的值
      this.keyword = this.keywordList[index] // 将点击的预览关键字里的内容赋给输入框里的关键字
      const brr = this.historyList.findIndex((value) => {
        return this.keyword === value // 循环去比较是否相等返回一个布尔值
      })
      console.log(brr)
      // 跳转到搜索的页面
      this.$router.push({
        path: '/searchResult',
        query: {
          q: this.keywordList[index]
        }
      })
      if (brr !== -1) return // 如果不为-1则不执行后面的程序
      this.historyList.push(this.keywordList[index])
      setItem('his', this.historyList)
    },
    // 删除历史数据
    delHistory (index) {
      this.historyList.splice(index, 1) // 删除历史记录里的数据
      setItem('his', this.historyList) // 重新存入新的历史记录
    },
    hisSearch (index) {
      // 跳转到搜索的页面
      console.log(index)
      this.$router.push({
        path: '/searchResult',
        query: {
          q: this.historyList[index]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
 /deep/.van-nav-bar .van-icon {
    color: white;
  }
</style>
